<template>
  <div class="con">
    <img
      class="img"
      :src="detail.icon"
      @click="more(detail.smallList[curr].id)"
      alt=""
      srcset=""
    />
    <div class="right">
      <div class="title">
        <div class="list">
          <div
            :class="curr == index ? 'list-add' : ''"
            v-for="(item, index) in detail.smallList"
            :key="index"
            @click="setcurr(index)"
          >
            {{ item.name }}
          </div>
        </div>
        <div
          class="genduo"
          v-if="detail.smallList[curr]"
          @click="more(detail.smallList[curr].id)"
        >
          更多 <img src="@/assets/img/right3.png" alt="" />
        </div>
      </div>
      <div class="list">
        <div
          class="item"
          v-for="item in goods"
          :key="item.id"
          @click="linkgoods(item.id)"
        >
          <img
            class="img"
            :src="item.imgurl"
            v-if="item.category == 0"
            alt=""
          />
          <div class="one oneline">{{ item.name }}</div>
          <div class="img threeline img-add" v-if="item.category == 1">
            {{ item.title }}
          </div>
          <div class="two">
            ￥<span>{{ item.price ? item.price.toFixed(2) : 999.99 }}</span>
          </div>
          <div class="sw">
            类型: {{ item.category == 1 ? "服务类型" : "普通类型" }}
          </div>
          <div class="ziying">
            <img
              v-if="item.shopTag == 1"
              src="@/assets/img/dianpu/zhiying.png"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  props: {
    detail: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      curr: 0,
      goods: []
    };
  },
  mounted() {
    this.getgoods();
  },
  methods: {
    getgoods() {
      if (this.detail.smallList && this.detail.smallList[this.curr]) {
        this.$postRequest("/api/goods/goodsListByClass", {
          pageNum: 1,
          pageSize: 8,
          classId: this.detail.smallList[this.curr].id
        }).then(res => {
          // var arr = res.data.list;
          // if(arr[2]){
          //   arr[2].category=1
          //   arr[2].title='选择器用于选择鼠标指针浮动在上面的元素。提示选择器可用于所有元素，不只是链接。提示 选择器设置指向未被访问页面的链接的样式，:visited 选择器用于设置指向已被访问的页面的链接，:active 选择器用于活动链接。注释：在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。'
          // }
          this.goods = res.data.list;
          console.log(this.goods);
        });
      }
    },
    setcurr(index) {
      if (index != this.curr) {
        this.curr = index;
        this.getgoods();
      }
    },
    more(id) {
      this.$router.push({ name: "classification", params: { id: id } });
    },
    linkgoods(id) {
      let Detail = this.$router.resolve({
        path: "/home/detail",
        query: {
          id
        }
      });
      window.open(Detail.href, "_blank");
    }
  }
};
</script>
<style scoped lang="scss">
.con {
  margin-bottom: 20px;
  display: flex;
  background: #ffffff;
  .img {
    width: 400px;
    height: 660px;
  }
  .right {
    width: 1000px;
    background: #ffffff;
    .title {
      height: 62px;
      background: #ffffff;
      border: 1px solid #eeeeee;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .list {
        display: flex;
        align-items: center;
        div {
          height: 32px;
          border: 1px solid #e7e7e7;
          border-radius: 4px;
          text-align: center;
          line-height: 32px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;
          box-sizing: content-box;
          padding: 0 20px;
          margin-left: 20px;
          cursor: pointer;
        }
        .list-add {
          border: 1px solid #1a69e0;
          color: #1a69e0;
        }
      }
      .genduo {
        height: 14px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        display: flex;
        align-items: center;
        cursor: pointer;
        img {
          width: 10px;
          height: 14px;
          margin: 0 8px 0 8px;
        }
      }
    }
    .list {
      display: flex;
      flex-flow: row wrap;
      .item {
        position: relative;
        width: 250px;
        height: 300px;
        background: #ffffff;
        border: 1px solid #eeeeee;
        border-left: 1px solid transparent;
        border-top: 1px solid transparent;
        padding: 0 20px;
        cursor: pointer;
        .img {
          width: 180px;
          height: 180px;
          display: block;
          margin: 0 auto;
        }
        .img-add {
          width: 100%;
          height: 100px;
          margin: 40px 0;
          line-height: 25px;
          display: -webkit-box;
          -webkit-line-clamp: 4;
        }
        .one {
          height: 17px;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #000000;
          // line-height: 20px;
          margin: 13px 0 18px 0;
        }
        .two {
          height: 20px;
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #e0441a;
          line-height: 20px;
          span {
            font-size: 24px;
          }
        }
        .sw {
          height: 15px;
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #747474;
          line-height: 20px;
          margin-top: 18px;
        }
        .ziying {
          position: absolute;
          right: 0;
          bottom: 8px;
          img {
            width: 40px;
            height: 20px;
          }
        }
      }
    }
  }
}
</style>